<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>Hello World</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css">

    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="/static/index/css/font-awesome.min.css">

    <!-- ElegantFonts CSS -->
    <link rel="stylesheet" href="/static/index/css/elegant-fonts.css">

    <!-- themify-icons CSS -->
    <link rel="stylesheet" href="/static/index/css/themify-icons.css">

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="/static/index/css/swiper.min.css">

    <!-- Styles -->
    <link rel="stylesheet" href="/static/index/style.css">


</head>
<body class="single-page causes-page">
{#<header class="site-header">#}
{#    <div class="top-header-bar">#}
{#        <div class="container">#}
{#            <div class="row flex-wrap justify-content-center justify-content-lg-between align-items-lg-center">#}
{#                <div class="col-12 col-lg-8 d-none d-md-flex flex-wrap justify-content-center justify-content-lg-start mb-3 mb-lg-0">#}
{#                    <div class="header-bar-email">#}
{#                        MAIL: <a href="#">11351702@qq.com</a>#}
{#                    </div><!-- .header-bar-email -->#}
{##}
{#<div class="header-bar-text">#}
{#    <p>PHONE: <span>+24 3772 120 091 / +56452 4567</span></p>#}
{#</div><!-- .header-bar-text -->#}
{#                </div><!-- .col -->#}
{##}
{#                <div class="col-12 col-lg-3 d-flex flex-wrap justify-content-center justify-content-lg-end align-items-center">#}
{#                    <div class="donate-btn">#}
{#                        <a href="#">联系</a>#}
{#                    </div><!-- .donate-btn -->#}
{#                </div><!-- .col -->#}
{#            </div><!-- .row -->#}
{#        </div><!-- .container -->#}
{#    </div><!-- .top-header-bar -->#}


{#导航#}
<div class="nav-bar ">
    <div class="container">
        <div class="row">
            <div class="col-12 d-flex flex-wrap justify-content-between align-items-center">
                <div class="site-branding d-flex align-items-center">
                    <a class="d-block" href="/index/" rel="home"><img class="d-block"
                                                                      src="/static/index/images/logo.png"
                                                                      alt="logo"></a>
                </div><!-- .site-branding -->

                <nav class=" site-navigation d-flex justify-content-end align-items-center">
                    <ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-content-center">

                        {#{{ url }}#}
                        {% if url == '/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/">首页</a></li>

                        {% if url == '/about/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/about/">关于我们</a></li>

                        {% if url == '/causes/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/causes/">福利</a></li>

                        {% if url == '/portfolio/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/portfolio/">安全</a></li>

                        {% if url == '/news/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/news/">新闻</a></li>

                        {% if url == '/contact/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/contact/">科技</a></li>

                        {% if url == '/elements/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/elements/">设计</a></li>


                        {% if url == '/single_causes/' %}
                            <li class="current-menu-item">
                                {% else %}
                            <li>
                        {% endif %}
                        <a href="/single_causes/">软件</a></li>

                        <li>
                            <div class="search-widget search">
                                <form class="flex flex-wrap align-items-center">
                                    <input type="search" placeholder="Search...">
                                    <button type="submit" class="flex justify-content-center align-items-center">
                                        GO
                                    </button>
                                </form><!-- .flex -->
                            </div><!-- .search-widget -->
                        </li>
                        {#<li>#}
                        {#    <a href="#">联系</a>#}
                        {#</li>#}

                    </ul>


                </nav><!-- .site-navigation -->

                <div class="hamburger-menu d-lg-none">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div><!-- .hamburger-menu -->
            </div><!-- .col -->
        </div><!-- .row -->
    </div><!-- .container -->
</div><!-- .nav-bar -->
</header><!-- .site-header -->

<div class="container">
    <div class="row">
        <div class="col-lg-12 ">
            <ul class="list-inline float-right  login-re">
                <li class="list-inline-item"><small><a href="#" class="text-muted">登录</a></small></li>
                |
                <li class="list-inline-item"><small><a href="#" class="text-muted">注册</a></small></li>
                |
                <li class="list-inline-item"><small><a href="#" class="text-muted">找回密码</a></small></li>


            </ul>
        </div>

    </div>
</div>

{#固定栏+广告#}
<div class="container-fluid top-bg-light mt-2 pt-4 pb-2">
    <div class="container">

        <div class="row">
            <div class="col-lg-8 d-none d-lg-inline-block">

                122

            </div>
            <div class="col-lg-4">
                <div class="newhot pl-lg-2">
                    <h5><a href="#" class="text-dark">最新热点</a></h5>
                </div>



                <ul class="list-inline pl-lg-2">
                    <li class="list-inline-item"><small><a href="#" class="text-muted">谷歌浏览器</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">MySQL</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">CentOS</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">VPS</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">小程序</a></small></li>
                    <br/>
                    <li class="list-inline-item"><small><a href="#" class="text-muted">广告</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">redis</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">Vue</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">Python</a></small></li>
                    |
                    <li class="list-inline-item"><small><a href="#" class="text-muted">Java</a></small></li>
                </ul>


            </div>
        </div>
    </div>
</div>

{% block main %}

{% endblock %}

<footer class="site-footer">
    <div class="footer-widgets">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-3">
                    <div class="foot-about">
                        <h2><a class="foot-logo" href="#"><img src="/static/index/images/foot-logo.png" alt=""></a></h2>

                        <p>Lorem ipsum dolor sit amet, con sectetur adipiscing elit. Mauris temp us vestib ulum
                            mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus vestib ulum
                            mauris.Lorem ipsum dolo.</p>

                        <ul class="d-flex flex-wrap align-items-center">
                            <li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-behance"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div><!-- .foot-about -->
                </div><!-- .col -->

                <div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
                    <h2>支持与服务</h2>

                    <ul>
                        <li><a href="#">关注我们</a></li>
                        <li><a href="#">公告</a></li>
                        <li><a href="#">技术圈</a></li>
                        <li><a href="#">测试服务</a></li>
                        <li><a href="#">网站搭建</a></li>
                        <li><a href="#">服务案例</a></li>
                        <li><a href="#">优化与提升</a></li>
                    </ul>
                </div><!-- .col -->

                <div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
                    <div class="foot-latest-news">
                        <h2>网站大事记</h2>

                        <ul>
                            <li>
                                <h3><a href="#">A new cause to help</a></h3>
                                <div class="posted-date">MArch 12, 2018</div>
                            </li>

                            <li>
                                <h3><a href="#">We love to help people</a></h3>
                                <div class="posted-date">MArch 12, 2018</div>
                            </li>

                            <li>
                                <h3><a href="#">The new ideas for helping</a></h3>
                                <div class="posted-date">MArch 12, 2018</div>
                            </li>
                        </ul>
                    </div><!-- .foot-latest-news -->
                </div><!-- .col -->

                <div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
                    <div class="foot-contact">
                        <h2>联系我们</h2>

                        <ul>
                            <li><i class="fa fa-phone"></i><span>+86 17315132702</span></li>
                            <li><i class="fa fa-envelope"></i><span>admin@modsjoy.com</span></li>
                            <li>
                                <i class="fa fa-map-marker"></i><span>Main Str. no 45-46, b3, 56832, Los Angeles, CA</span>
                            </li>
                        </ul>
                    </div><!-- .foot-contact -->

                    <div class="subscribe-form">
                        <form class="d-flex flex-wrap align-items-center">
                            <input type="email" placeholder="Your email">
                            <input type="submit" value="send">
                        </form><!-- .flex -->
                    </div><!-- .search-widget -->
                </div><!-- .col -->
            </div><!-- .row -->
        </div><!-- .container -->
    </div><!-- .footer-widgets -->

    <div class="footer-bar">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="m-0">
                        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                        Copyright &copy;<script>document.write(new Date().getFullYear());</script>
                        All rights reserved | This template is made with <i class="fa fa-heart-o"
                                                                            aria-hidden="true"></i> by <a
                            href="https://colorlib.com" target="_blank">Colorlib</a>
                        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
                </div><!-- .col-12 -->
            </div><!-- .row -->
        </div><!-- .container -->
    </div><!-- .footer-bar -->
</footer><!-- .site-footer -->


<script type='text/javascript' src='/static/index/js/jquery.js'></script>
<script type='text/javascript' src='/static/index/js/jquery.collapsible.min.js'></script>
<script type='text/javascript' src='/static/index/js/swiper.min.js'></script>
<script type='text/javascript' src='/static/index/js/jquery.countdown.min.js'></script>
<script type='text/javascript' src='/static/index/js/circle-progress.min.js'></script>
<script type='text/javascript' src='/static/index/js/jquery.countTo.min.js'></script>
<script type='text/javascript' src='/static/index/js/jquery.barfiller.js'></script>
<script type='text/javascript' src='/static/index/js/custom.js'></script>


</body>
</html>